<template>
  <view class="page">
    <u-icon
      :label="tipsLabel()"
      size="40rpx"
      :name="detail.state == 6 ? 'checkmark-circle' : 'clock'"
      label-size="40rpx"
      bold
      label-color="#222"
    />
    <u-text
      v-if="detail.state == 8"
      :text="`请在${$TimeFormat(detail.verify_expire_time)}前到店消费`"
      color="#979797"
      size="28rpx"
      line-height="80rpx"
      block
    />
    <view class="card" :class="{ ticket: detail.type != 'party' }">
      <view
        class="sn-body"
        :style="{
          paddingBottom: detail.type != 'party' ? '44rpx' : 'none',
          borderBottom: detail.type != 'party' ? '1rpx dashed #3ba19980' : 'none',
        }"
      >
        <u-image
          show-loading
          :show-menu-by-longpress="false"
          :src="domain + detail.goods.image"
          width="152rpx"
          height="152rpx"
          radius="20rpx"
        />
        <view class="sn-center">
          <view class="sn-center-top">{{ detail.goods.title || "-" }}</view>
          <u-text
            :text="`${detail.type == 'party' ? '支付时间' : '有效期'}：${$TimeFormat(
              detail.verify_expire_time,
              'yyyy-mm-dd hh:MM'
            )}`"
            color="#555"
            size="24rpx"
          />
          <u-text
            v-if="detail.type != 'party'"
            :text="`人数：${detail.goods.number || '-'}人`"
            color="#555"
            size="24rpx"
          />
        </view>
        <view
          class="price"
          :style="{
            top: detail.type != 'party' ? '22rpx' : '100rpx',
          }"
        >
          ￥{{ detail.goods.actual_payment || "-" }}
        </view>
      </view>
      <view class="qrcode" v-if="detail.type != 'party'">
        <uv-qrcode
          ref="uvqrcode1"
          size="400rpx"
          :value="
            detail.state == 8
              ? JSON.stringify({
                  id: detail.id,
                  codes: detail.verify_code,
                })
              : '请勿重复扫码'
          "
          :options="{
            foregroundColor: qrColor,
          }"
        >
          <template v-slot:loading>
            <u-loading-icon text="加载中" vertical text-size="18" />
          </template>
        </uv-qrcode>
      </view>
      <view class="flex" v-if="detail.type != 'party'">
        <view>
          <u-text
            :text="`券码信息（${detail.goods.number || '-'}张可用）`"
            color="#222222"
            size="28rpx"
            line-height="50rpx"
            bold
          />
          <u-text
            :text="`${$TimeFormat(detail.verify_expire_time, 'yyyy-mm-dd hh:MM')}到期`"
            color="#555"
            size="28rpx"
            line-height="50rpx"
          />
        </view>
        <view>
          <view class="green" v-if="detail.state >= 7" @click="handleRefund">
            {{ refundLabel(detail.goods) }}
          </view>
        </view>
      </view>
      <u-gap height="15" v-if="detail.type != 'party'" />
      <u-row v-if="detail.type != 'party'">
        <u-col span="8">
          <u-text
            :text="`· ${detail.activity.phone || '-'}`"
            color="#222"
            bold
            size="28rpx"
            line-height="50rpx"
          />
        </u-col>
        <u-col span="4">
          <u-text
            :text="statusLabel()"
            color="#3BA199"
            size="28rpx"
            align="right"
            line-height="50rpx"
          />
        </u-col>
      </u-row>
    </view>
    <view class="card">
      <Sub-title :label="detail.activity.shopname" padding="0" />
      <view style="margin: 20rpx 0">
        <u-icon
          :label="detail.activity.address || '-'"
          size="28rpx"
          name="map-fill"
          labelSize="28rpx"
          color="#1A98FC"
          labelColor="#979797"
          @click="handleMap"
        />
      </view>
      <u-icon
        :label="`联系我们 ${detail.activity.phone || '-'}`"
        size="28rpx"
        name="phone-fill"
        labelSize="28rpx"
        color="#2CB9A4"
        labelColor="#979797"
        @click="callPhone"
      />
    </view>
  </view>
</template>
<script>
import config from "@/request/baseUrl.js";
import { myActivityOrderDetail } from "@/request/myApi.js";
export default {
  data() {
    return {
      domain: config.baseUrl,
      orderId: "", // 订单ID
      detail: {}, // 订单详情
      qrColor: "", // 二维码颜色
    };
  },
  onLoad(e) {
    this.orderId = e.id;
    this.getData();
  },
  methods: {
    // 预览图片
    preImage() {
      uni.previewImage({
        urls: [this.detail.qrCode],
      });
    },
    // 申请退款
    handleRefund() {
      if (this.detail.goods.refund_status != 0) return;
      let order = {
        order_id: this.detail.id,
        goods_id: this.detail.goods.id,
        money: this.detail.goods.actual_payment,
        virtual_coin: this.detail.goods.virtual_coin,
        pay_type: this.detail.pay.pay_type,
      };
      uni.navigateTo({ url: `/pages/my/myRefund?data=${JSON.stringify(order)}` });
    },
    // 活动状态
    statusLabel() {
      let v = this.detail.state;
      if (v == -2) {
        this.qrColor = "#a5a5a5";
        return "交易关闭";
      } else if (v == 1) {
        this.qrColor = "#a5a5a5";
        return "待付款";
      } else if (v == 8) {
        this.qrColor = "#000";
        return "待消费";
      } else if (v == 6) {
        this.qrColor = "#a5a5a5";
        return "已完成";
      } else {
        this.qrColor = "#a5a5a5";
        return "已取消";
      }
    },
    // 退款状态
    refundLabel(v) {
      return ["申请退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][
        v.refund_status
      ];
    },
    // 状态提示
    tipsLabel() {
      let v = this.detail.state;
      if (v == 1) return "待付款";
      else if (v == 8) return "待到店使用";
      else if (v == 6) return "消费完成";
      else if (v == 7) return "已取消";
      else return "已申请退款";
    },
    // 获取订单详情
    getData() {
      myActivityOrderDetail(this.orderId).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
        }
      });
    },
    // 地图
    handleMap() {
      uni.authorize({
        scope: "scope.userLocation", // 请求获取用户地理位置信息的权限
        success: () => {
          const { lat, lng, address } = this.detail;
          uni.openLocation({
            latitude: parseFloat(lat || 0),
            longitude: parseFloat(lng || 0),
            name: address,
            scale: 16,
          });
        },
        fail() {
          uni.showToast({
            title: "授权失败",
            icon: "none",
          });
        },
      });
    },
    // 拨打电话
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.detail.activity.phone,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 20rpx;
  background-color: #fbfbfb;
  min-height: calc(100vh - 88rpx);
  .card {
    padding: 30rpx;
    margin: 20rpx 0 40rpx 0;
    box-shadow: 0 0 20rpx rgba(218, 218, 218, 0.4);
    border-radius: 20rpx;

    .sn-body {
      display: flex;
      .sn-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 116rpx;
        margin-left: 20rpx;
        &-top {
          width: 380rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: #222;
          line-height: 40rpx;
          word-break: break-all;
          padding-bottom: 16rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .price {
        position: absolute;
        right: 30rpx;
        color: #222222;
        font-weight: 600;
        font-size: 40rpx;
        background-color: #fff;
      }
    }
    .qrcode {
      display: flex;
      justify-content: center;
      padding: 62rpx;
    }
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1rpx dashed #3ba19980;
    }
    .green {
      display: inline-block;
      height: 56rpx;
      width: 160rpx;
      text-align: center;
      line-height: 56rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
      color: $active-color;
      background-color: #cee7e5;
      &:active {
        background-color: #c2dcda;
      }
    }
  }
  .ticket {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 200rpx;
      left: -22rpx;
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
      background-color: #f9f9f9;
    }
    &::after {
      content: "";
      position: absolute;
      top: 200rpx;
      right: -22rpx;
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
      background-color: #f9f9f9;
    }
  }
}
</style>
